<script setup lang="ts">
  import { useApplication } from "./utils/hook";
  import {ref, computed, nextTick, onMounted, watch} from "vue";
  import { PureTableBar } from "@/components/RePureTableBar";
  import { useRenderIcon } from "@/components/ReIcon/src/hooks";
  import applicationAddPage from "@/views/application/applicationAdd/index.vue";
  import appStartApplyPage from "@/views/application/appStartApply/index.vue";
  import appCancelApplyPage from "@/views/application/appCancelApply/index.vue";

  import {
    deviceDetection,
  } from "@pureadmin/utils";

  import Delete from "@iconify-icons/ep/delete";
  import EditPen from "@iconify-icons/ep/edit-pen";
  import Refresh from "@iconify-icons/ep/refresh";
  import Menu from "@iconify-icons/ep/menu";
  import AddFill from "@iconify-icons/ri/add-circle-line";
  import Close from "@iconify-icons/ep/close";
  import Check from "@iconify-icons/ep/check";
  import {useUserStoreHook} from "@/store/modules/user";

  defineOptions({
    name: "SystemRole"
  });

  const iconClass = computed(() => {
    return [
      "w-[22px]",
      "h-[22px]",
      "flex",
      "justify-center",
      "items-center",
      "outline-none",
      "rounded-[4px]",
      "cursor-pointer",
      "transition-colors",
      "hover:bg-[#0000000f]",
      "dark:hover:bg-[#ffffff1f]",
      "dark:hover:text-[#ffffffd9]"
    ];
  });

  const formRef = ref();
  const tableRef = ref();
  const contentRef = ref();

  const {
    form,
    isShow,
    curRow,
    loading,
    columns,
    rowStyle,
    dataList,
    isLinkage,
    pagination,
    isExpandAll,
    isSelectAll,
    onSearch,
    resetForm,
    openDialog,
    handleMenu,
    handleSave,
    handleDelete,
    filterMethod,
    transformI18n,
    onQueryChanged,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange,
    applicationAdd,
    applicationStart,
    applicationCancel,
    applicationgOption,
    applicationAddRef,
    appStartApplyRef,
    appCancelApplyRef
  } = useApplication();
</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
      <el-form-item label="应用名称：" prop="name">
        <el-select v-model="form.applicationCode" placeholder="请选择应用名称" clearable class="!w-[180px]">
          <el-option v-for="item in applicationgOption" :key="item.applicationCode" :label="item.applicationName"
            :value="item.applicationCode">{{ item.applicationName }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开发团队：" prop="code">
        <el-input v-model="form.developmentTeam" placeholder="请输入开发团队" clearable class="!w-[180px]" />
      </el-form-item>
      <el-form-item label="应用状态：" prop="status">
        <el-select v-model="form.status" placeholder="请选择应用状态" clearable class="!w-[180px]">
          <el-option label="已启用" value="1" />
          <el-option label="已注销" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch()">
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
      <PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="应用管理" :columns="columns"
        @refresh="onSearch">
        <template #buttons>
          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="applicationAdd()">
            应用注册
          </el-button>
        </template>
        <template v-slot="{ size, dynamicColumns }">
          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
            :size="size" adaptive :row-style="rowStyle" :adaptiveConfig="{ offsetBottom: 108 }" :data="dataList" :watch="dataList"
            :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }" @selection-change="handleSelectionChange" @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange">
            <template #operation="{ row }">
              <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
                @click="openDialog( row)">
                修改
              </el-button>
              <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
                v-if="row.status=='0'" @click="applicationStart(row)">
                启用
              </el-button>
              <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)" v-else
                @click="applicationCancel(row)">
                注销
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>

      <applicationAddPage ref="applicationAddRef" :onSearch="onSearch" @cropper="cropper"></applicationAddPage>
      <appStartApplyPage ref="appStartApplyRef" :onSearch="onSearch" @cropper="cropper"></appStartApplyPage>
      <appCancelApplyPage ref="appCancelApplyRef" :onSearch="onSearch" @cropper="cropper"></appCancelApplyPage>

    </div>
  </div>

</template>

<style scoped lang="scss">
  :deep(.el-dropdown-menu__item i) {
    margin: 0;
  }

  .main-content {
    margin: 24px 24px 0 !important;
  }

  .search-form {
    :deep(.el-form-item) {
      margin-bottom: 12px;
    }
  }
</style>
